@layout("/backend/common/_container.html"){
<#Hidden id="dataId" value="${data!}"/>
<link href="${ctxPath}/static/backend/sds/portal/portal.css" rel="stylesheet">
<div class="hisui-panel" id="QCPanel" fit="true" style="padding:10px;border:none;">
    <div id="home" class="hisui-layout" data-options="fit:true" style="border:none;">
        <div data-options="region:'north',headerCls:'panel-header-gray',title:'自定义查询',collapsed:true,showCollapsedTitle:true" style="height:125px;border:0;padding:0;">
            <div id="QryTitle" fit="true" style="border:none;">
                <table cellspacing="8px" style="padding:0px;border:0px;">
                    <tr>
                        <td style="text-align:right;width:80px">开始日期</td>
                        <td>
                            <input id="SDate" class="hisui-datebox textbox" >
                        </td>
                        <td style="text-align:right;width:80px">结束日期</td>
                        <td>
                            <input id="EDate" class="hisui-datebox textbox" >
                        </td>
                        <td>
                            <a class="hisui-linkbutton" id="search" style="cursor: pointer;" onclick="obj.search()">检索</a>
                            <a class="hisui-linkbutton" id="export" style="cursor: pointer;" onclick="exp()">导出</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div data-options="region:'center'" style="padding:0px;border:none;">
            <div style="padding:0;" fit="true" data-options="border:false" id="QCReportInTimeRatio"></div>
            <div style="float:left;" id="Alias"></div>
        </div>
    </div>
</div>
<script type="text/javascript" src="${ctxPath}/static/common/js/echarts.min.js" charset="utf-8"></script>
<script type="text/javascript" src="${ctxPath}/static/libs/sheetjs/xlsx.mini.js" charset="utf-8"></script>
<script language="javascript" type="text/javascript">
    var obj = new Object();
    var QCRows = null;

    obj.drawRatioAlias = function (data) {
        //根据报告信息+查询参数，计算病种展现信息
        var QCRows = data.upTimeEntityData
        var QCLength = QCRows.length, columns = 4, listHtml = "<div>"
        var per = Math.round((1 / columns) * 90) + '%';   //每列所在百分比
        var count = parseInt(QCLength / columns) + 1;
        for (var index = 0; index < count; index++) {		//行遍历
            var listlen = (((index + 1) * columns) < QCLength) ? (index + 1) * columns : QCLength;
            listHtml += "<div style='padding:10px'>";
            for (var qcIndex = index * columns; qcIndex < listlen; qcIndex++) { //对应行数据输出
                var qcobj = QCRows[qcIndex];
                listHtml += " <div style='border:1px solid #ccc;border-radius:5px;margin-right:10px;padding:3px;text-align:left;float:left;width:" + per + "' >"
                listHtml += " <p style='margin: 5px 0 10px 0;font-weight:bold;'>" + " " + qcobj.entityDesc + "</p>";
                listHtml += "<div>"
                listHtml += "<img style='float: left;border-radius: 10px;'  src='/static/common/img/sds/" + qcobj.code + ".png' width='70px' height='70px' />"
                listHtml += " <div style='float: left;margin-left: 15px;'>";
                listHtml += " <p style='margin:0 0 10px 0;'>十日内填报率：<a style='cursor:pointer'><span>" + qcobj.aRatio + " %</span></a></p>";
                listHtml += " </div>";
                listHtml += "</div>"
                listHtml += "</div>";
            }
            listHtml += "</div>"
            listHtml += "<div style='clear:both'></div>"
        }
        listHtml += "</div>"
        $('#QCReportInTimeRatio').html(listHtml);
        $.parser.parse('#QCReportInTimeRatio');  //解析元素样式
    }

    obj.search = function () {
        var startDate = $("#SDate").datebox('getValue');
        var endDate = $("#EDate").datebox('getValue');
        if (startDate != "" && endDate == "") {
            $.messager.alert("错误提示", "结束时间不允许为空!", 'info');
            return;
        }
        if (startDate == "" && endDate != "") {
            $.messager.alert("错误提示", "开始时间不允许为空!", 'info');
            return;
        }

        if (startDate > endDate) {
            $.messager.alert("错误提示", "开始时间不允许大于结束时间!", 'info');
            return;
        }

        var params = {};
        var ajax = new $ax(Sys.backendPath + "/analysis/sdsmsta2/selectSdsUpData", function (data) {
            obj.drawRatioAlias(data);
            QCRows = data;
        }, function (data) {
        });
        params.startDate = startDate + " 00:00:00";
        params.endDate = endDate + " 23:59:59";
        ajax.set(params);
        ajax.start();
    }

    obj.showRatioAlias = function (usetimeStr) {
        var usetimeArr = usetimeStr.split(',')

        var event = event || window.event;
        console.log(event)
        $("#Alias").webuiPopover('destroy');
        $HUI.popover('#Alias', {
            width: '500px',
            height: '300px',
            placement: 'bottom',
            content: '<div id="AliasEcharts" style="width:100%;height:100%;"></div>',
            type: 'html',
            offsetTop: -event.clientY + 20,
            offsetLeft: event.clientX
        });
        $("#Alias").popover('show');
        //usetimeArr=[3,6,7,5,9,6,7,4,9,10,11,3]
        var myChart = echarts.init(document.getElementById('AliasEcharts'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '近期上报平均用时情况',
                textStyle: {
                    fontSize: 16
                }
            },
            tooltip: {},
            legend: {},
            xAxis: {
                data: Array.from(new Array(usetimeArr.length).keys()) //生成病例序列号
            },
            yAxis: {},
            series: [
                {
                    name: '填报用时(分钟)',
                    type: 'line',
                    data: usetimeArr,
                    markLine: {
                        data: [{type: 'average', name: '平均值'}]
                    }
                },

            ]
        };
        myChart.setOption(option);
    }

    function exp() {
        const header = {
            description: '代码', code: '名称', aRatio: '填充率（%）'
        }

        // 设置表格样式，!cols为列宽
        const options = {
            '!cols': [
                {wpx: 100},
                {wpx: 200},
                {wpx: 100}
            ]
        };

        var data = QCRows;
        //根据报告信息+查询参数，计算病种展现信息
        QCRows = data.upTimeEntityData;
        var excelDate = []
        for (let i = 0; i < QCRows.length; i++) {
            var row = QCRows[i];
            var obj = {'代码': row.code, '名称': row.entityDesc, '十日填报率（%）': row.aRatio}
            excelDate.push(obj)
        }

        // 1. 创建一个工作簿 workbook
        const workBook = XLSX.utils.book_new()
        // 2. 创建工作表 worksheet
        const workSheet = XLSX.utils.json_to_sheet(excelDate)
        workSheet['!cols'] = options['!cols'];
        // 3. 将工作表放入工作簿中
        XLSX.utils.book_append_sheet(workBook, workSheet)
        // 4. 生成数据保存
        XLSX.writeFile(workBook, '十日填报率.xlsx', {
            bookType: 'xlsx'
        })
    }
    $(function(){
        var params = {};
        var ajax = new $ax(Sys.backendPath + "/analysis/sdsmsta2/selectSdsUpData", function (data) {
            obj.drawRatioAlias(data);
            QCRows = data;
        }, function (data) {
        });
        ajax.set(params);
        ajax.start();
    })
</script>
@}